<!--
 * @Author: jhy
 * @Date: 2024-07-22 19:48:51
 * @LastEditTime: 2024-09-07 19:15:47
 * @LastEditors: jhy
 * @Description: 
 * @FilePath: /yiyu/szzjzc/src/components/jgzzsearch.vue
-->
<template>
    <div class="jgzzsearch">
        <div class="jgzzsearch-main">
            <div class="jgzzsearch-left">
                <div class="list-con">
                    <div class="list" :class="main_active == 0 && 'on'" @click="mainClick(0)">材料</div>
                    <div class="list" :class="main_active == 1 && 'on'" @click="mainClick(1)">劳务</div>
                    <div class="list" :class="main_active == 2 && 'on'" @click="mainClick(2)">专业分包</div>
                    <div class="list" :class="main_active == 3 && 'on'" @click="mainClick(3)">租赁</div>
                </div>
            </div>
            <div class="jgzzsearch-right">
                <div class="nav" :class="'nav_' + main_active">
                    <div class="nav-list" :class="child_active == 0 && 'on'" @click="childClick(0)">固定价</div>
                    <div class="nav-list" v-if="main_active == 0" :class="child_active == 1 && 'on'"
                        @click="childClick(1)">浮动价</div>
                    <div class="nav-list" v-if="main_active == 0 || main_active == 2" :class="child_active == 2 && 'on'"
                        @click="childClick(2)">费率报价</div>
                </div>
                <div class="jgzzsearch-center">
                    <div class="factor" :class="'w_' + main_active">
                        <div class="factor-list" v-if="main_active == 0">
                            <div class="label_1">

                                <select v-model="hot_0" v-if="child_active == 0">
                                    <option value="1">热门材料</option>
                                    <option value="2">材料分类</option>
                                </select>
                                <span class="label" v-else>材料分类</span>
                            </div>
                            <div class="myselectjgzz" style="flex: 1;">
                                <el-cascader v-show="hot_0 == 1" clearable size="mini" collapse-tags
                                    v-model="hotMatCodes" :options="hot_arr_0"
                                    @active-item-change="handleActiveItemChange" :props="propsOptHot1">
                                </el-cascader>
                                <el-cascader v-show="hot_0 == 2" clearable size="mini" v-model="matCode" :options="clfl"
                                    @active-item-change="handleActiveItemChange" :props="propsOpt1">
                                </el-cascader>
                            </div>
                        </div>
                        <div class="factor-list" v-if="main_active == 1" style="width: 28%;">
                            <span class="label">工种分类</span>
                            <!-- <div class="label_1">
                                <select v-model="hot_1">
                                    <option value="1">热门工种</option>
                                    <option value="2">工种分类</option>
                                </select>
                            </div> -->
                            <div class="myselectjgzz" style="flex: 1">
                                <el-cascader v-show="hot_1 == 1" clearable size="mini" collapse-tags
                                    v-model="hotMatCodes" :options="hot_arr_1"
                                    @active-item-change="handleActiveItemChange" :props="propsOptHot1">
                                </el-cascader>
                                <el-cascader v-show="hot_1 == 2" clearable size="mini" v-model="gzfl_val"
                                    :options="gzfl" @active-item-change="handleActiveItemChange" :props="propsOpt1">
                                </el-cascader>
                            </div>
                        </div>
                        <div class="factor-list" v-if="main_active == 3" style="width: 28%;">
                            <span class="label">机械租赁分类</span>
                            <!-- <div class="label_1">
                                <select v-model="hot_3">
                                    <option value="1">热门租赁分类</option>
                                    <option value="2">机械租赁分类</option>
                                </select>
                            </div> -->
                            <div class="myselectjgzz" style="flex: 1">
                                <el-cascader v-show="hot_3 == 1" clearable size="mini" collapse-tags
                                    v-model="hotMatCodes" :options="hot_arr_3"
                                    @active-item-change="handleActiveItemChange" :props="propsOptHot1">
                                </el-cascader>
                                <el-cascader v-show="hot_3 == 2" clearable size="mini" v-model="jxzp_val"
                                    :options="jxzp" @active-item-change="handleActiveItemChange" :props="propsOpt1">
                                </el-cascader>
                            </div>
                        </div>
                        <div class="factor-list" v-if="main_active == 2" style="width: 35%;">
                            <span class="label">专业分包分类</span>
                            <!-- <div class="label_1">
                                <select v-model="hot_2">
                                    <option value="1">热门分包分类</option>
                                    <option value="2">专业分包分类</option>
                                </select>
                            </div> -->
                            <div class="myselectjgzz" style="flex: 1">
                                <el-cascader v-show="hot_2 == 1" clearable size="mini" collapse-tags
                                    v-model="hotMatCodes" :options="hot_arr_2"
                                    @active-item-change="handleActiveItemChange" :props="propsOptHot1">
                                </el-cascader>
                                <el-cascader v-show="hot_2 == 2" clearable size="mini" v-model="zyfb_val"
                                    :options="zyfb" @active-item-change="handleActiveItemChange" :props="propsOpt1">
                                </el-cascader>
                            </div>
                        </div>
                        <div class="factor-list"
                            :style="`width: ${main_active == 0 ? 65 : main_active == 1 ? 55 : main_active == 2 ? 62 : 50}%`">
                            <span class="label">时间</span>
                            <div class="myselectjgzz" style="flex: 1">
                                <Select v-model="timeCheckVal" placeholder="请选择" size="mini" @change="timeCheckChange"
                                    clearable>
                                    <el-option v-for="item in timelist" :key="item.value" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </Select>
                            </div>
                            <div class="time">
                                <el-date-picker size="mini" :picker-options="pickerOptions0" v-model="criteria4_start"
                                    type="date" :editable="false" clearable value-format="yyyy-MM-dd" placeholder="开始日期"
                                    @focus="handleOperation(true)" @blur="handleOperation(false)">
                                </el-date-picker>
                                <span style="line-height: 28px;padding:0 10px;margin-top: -5px;">-</span>
                                <el-date-picker size="mini" :picker-options="pickerOptions1" v-model="criteria4_end"
                                    type="date" :editable="false" clearable value-format="yyyy-MM-dd" placeholder="结束日期"
                                    @focus="handleOperation(true)" @blur="handleOperation(false)">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="factor-list">
                            <span class="label">清单名称</span>
                            <div class="myselectjgzz2" style="flex: 1" >
                                <!-- <Select v-model="gclb_val" clearable placeholder="请选择" size="mini">
                                    <el-option v-for="item in gclb" :key="item.value" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </Select> -->
                                <el-input v-model="materialName" placeholder="请输入清单名称" clearable></el-input>

                                <!-- <div class="lineheng"></div> -->
                            </div>
                        </div>
                        <div class="factor-list" v-if="main_active !== 0 && main_active !== 3">
                            <span class="label">工程类型</span>
                            <div class="myselectjgzz" style="flex: 1">
                                <Select v-model="gclb_val" clearable placeholder="请选择" size="mini">
                                    <el-option v-for="item in gclb" :key="item.value" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </Select>
                                <!-- <div class="lineheng"></div> -->
                            </div>
                        </div>

                        <div class="factor-list" :style="{ width: main_active == 0 ? '60%' : '50%' }">
                            <span class="label">项目地点</span>
                            <div class="ads myselectjgzz">
                                <Select v-model="area_val" clearable placeholder="地区" size="mini" @change="areaChange">
                                    <el-option v-for="item in area_list" :key="item.areacode" :label="item.title"
                                        :value="item.areacode">
                                    </el-option>
                                </Select>
                                <Select v-model="province_val" clearable placeholder="省" size="mini"
                                    @change="provinceChange">
                                    <el-option v-for="item in province_list" :key="item.areacode" :label="item.title"
                                        :value="item.areacode">
                                    </el-option>
                                </Select>
                                <Select v-model="city_val" clearable placeholder="市" size="mini" @change="cityChange">
                                    <el-option v-for="item in city_list" :key="item.areacode" :label="item.title"
                                        :value="item.areacode">
                                    </el-option>
                                </Select>
                                <Select v-model="district_val" clearable placeholder="区" size="mini"
                                    @change="districtChange">
                                    <el-option v-for="item in district_list" :key="item.areacode" :label="item.title"
                                        :value="item.areacode">
                                    </el-option>
                                </Select>
                            </div>
                        </div>
                        <!-- <div class="factor-list" style="width: 40%">
                            <span class="label">时间</span>
                        </div> -->
                    </div>
                    <div class="btn-con">
                        <span class="reset" @click="resetEvent">重置</span>
                        <img class="iconsearch" @click="searchEvent" src="@/assets/iconsearch.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import APIS from "@/api/index";
import Select from "@/components/select/index.js";
import { timestampToTime1 } from "@/utils/common";
export default {
    components: {
        Select,
    },
    data() {
        let new_date = new Date();
        return {

            seconddiqulist: [],
            area_list: [],
            area_name: '',
            province_name: '',
            province_list: [],
            area_val: 'C02',
            province_val: 'C0233',
            city_val: 'C023301',
            city_name: '',
            city_list: [],
            district_val: '',
            district_name: '',
            district_list: [],
            materialName: '',
            timeCheckVal: 4,
            timelist: [
                { name: '近半年', value: 4 },
                { name: '近一个月', value: 1 },
                { name: '近15天', value: 2 },
                { name: '近7天', value: 3 },
            ],
            // 材料
            clfl: [],

            gzfl_val: '',
            gzfl: [],
            // 专业分包
            zyfb_val: '',
            zyfb: [],
            // 机械租赁 
            jxzp_val: '',
            jxzp: [],

            opt_1: [],
            opt_2: [],
            propsOpt1: {
                label: 'title',
                value: 'materialclasscode',
                checkStrictly: true,
            },
            propsOptHot1: {
                label: 'materialclassname',
                value: 'materialclasscode',
                multiple: true,
            },
            gclb_val: '',
            gclb: [],

            main_active: 0,
            child_active: 0,

            timer: null,
            matCode: null,

            propsOpt_0: {
                lazy: true,
                checkStrictly: true,
                lazyLoad(node, resolve) {
                    const { level } = node;
                    console.log('node->', node);
                    // this.matCode = node?.data?.materialclasscode
                    let nodes = [];
                    let pid = node?.data?.materialclassid;
                    let materialclasscode = node?.data?.materialclasscode;
                    let data1 = { offerType: 1, pid, materialclasscode }
                    APIS.Baseapi.matClassify(data1).then((res) => {
                        let data = res.data;
                        data.map(e => {
                            e.label = e.title
                            e.value = e.materialclasscode
                            if (e.children && e.children.length > 0) {
                                e.children.map(e1 => {
                                    e1.label = e1.title;
                                    e1.value = e1.materialclasscode;
                                    e1.matCode = e1.materialclasscode;
                                    return e1;
                                })
                            }
                            return e;
                        })

                        resolve(data);
                    }).catch(err => {
                        console.log('err', err);
                    })



                },
            },

            propsOpt_1: {
                lazy: true,
                checkStrictly: true,
                lazyLoad(node, resolve) {
                    const { level } = node;
                    console.log('node->', node);
                    // this.matCode = node?.data?.materialclasscode
                    let nodes = [];
                    let pid = node?.data?.materialclassid;
                    let materialclasscode = node?.data?.materialclasscode;
                    let data1 = { offerType: 2, pid, materialclasscode }
                    APIS.Baseapi.matClassify(data1).then((res) => {
                        let data = res.data;
                        data.map(e => {
                            e.label = e.title
                            e.value = e.materialclasscode
                            if (e.children && e.children.length > 0) {
                                e.children.map(e1 => {
                                    e1.label = e1.title;
                                    e1.value = e1.materialclasscode;
                                    e1.matCode = e1.materialclasscode;
                                    return e1;
                                })
                            }
                            return e;
                        })

                        resolve(data);
                    }).catch(err => {
                        console.log('err', err);
                    })



                },
            },

            propsOpt_2: {
                lazy: true,
                checkStrictly: true,
                lazyLoad(node, resolve) {
                    const { level } = node;
                    console.log('node->', node);
                    // this.matCode = node?.data?.materialclasscode
                    let nodes = [];
                    let pid = node?.data?.materialclassid;
                    let materialclasscode = node?.data?.materialclasscode;
                    let data1 = { offerType: 3, pid, materialclasscode }
                    APIS.Baseapi.matClassify(data1).then((res) => {
                        let data = res.data;
                        data.map(e => {
                            e.label = e.title
                            e.value = e.materialclasscode
                            if (e.children && e.children.length > 0) {
                                e.children.map(e1 => {
                                    e1.label = e1.title;
                                    e1.value = e1.materialclasscode;
                                    e1.matCode = e1.materialclasscode;
                                    return e1;
                                })
                            }
                            return e;
                        })

                        resolve(data);
                    }).catch(err => {
                        console.log('err', err);
                    })



                },
            },
            pickerOptions0: {
                disabledDate: (time) => {
                    if (this.criteria4_end) {
                        return time.getTime() > new Date(this.criteria4_end).getTime();
                    }
                },
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < new Date(this.criteria4_start).getTime();
                },
            },
            criteria4_start: new Date(+new_date - 180 * 24 * 3600 * 1000),
            criteria4_end: new_date,
            criteria4: [new Date(+new_date - 180 * 24 * 3600 * 1000), new_date],

            typeList: [],

            hotMatCodes: '',

            hot_0: 1,
            hot_1: 2,
            hot_2: 2,
            hot_3: 2,

            hot_arr_0: [],
            hot_arr_1: [],
            hot_arr_2: [],
            hot_arr_3: [],
        }
    },
    props: ['wldllist', 'wlellist2', 'wlellist3'],
    watch: {
        wldllist(newValue, oldValue) {
            if (newValue.length > 0 && !this.matCode) {
                // this.matCode = [newValue[0].materialclasscode];
            }
        },
        area_val(newVal) {
            this.area_list.map(e => {
                if (e.areacode === newVal) {
                    this.area_name = e.title;
                    this.province_list = e.children;
                    this.province_val = '';
                    this.province_name = '';
                    this.city_val = '';
                    this.city_name = '';
                    this.district_val = '';
                    this.district_name = '';
                }
            })
        },
        province_val(newVal) {
            this.province_list.map(e => {
                if (e.areacode === newVal) {
                    this.province_name = e.title;
                    this.city_list = e.children;
                    this.city_val = '';
                    this.city_name = '';
                    this.district_val = '';
                    this.district_name = '';
                }
            })
        },
        city_val(newVal) {
            this.city_list.map(e => {
                if (e.areacode === newVal) {
                    this.city_name = e.title;
                    this.district_list = e.children;
                    this.district_val = '';
                    this.district_name = '';
                }
            })
        },
        district_val(newVal) {
            this.district_list.map(e => {
                if (e.areacode === newVal) {
                    this.district_name = e.title;
                    // this.district_list = e.children;
                }
            })
        }
    },
    mounted() {
        // 项目地点
        // this.getarea();
        this.getProjectEvaluation(0, '');
        this.getProjectEvaluation(1, 'C02');
        this.getProjectEvaluation(2, 'C0233');
        this.getProjectEvaluation(3, 'C023301');
        // 工程类型
        this.getEng();
        // 公种分类
        this.getLabourClassify();
        // 机械租赁分类
        // this.getMatClassJX();

        this.getHotMatClass();
    },
    methods: {
        // 热门
        getHotMatClass() {
            // mcType 分类 0：材料 1：专业分包 3：租赁 4：劳务
            let mcType;
            switch (this.main_active) {
                case 0: case '0':  // 材料
                    mcType = 0
                    break;
                case 1: case '1':  // 劳务
                    mcType = 4
                    break;
                case 2: case '2':  // 专业分包
                    mcType = 1
                    break;
                case 3: case '3':  // 租赁
                    mcType = 3
                    break;
                default:
                    break;
            };
            let offerType;
            //   1=固定架 2=浮动价 3=费率价
            switch (this.child_active) {
                case 0: case '0':  // 固定价
                    offerType = 1;
                    break;
                case 1: case '1':  // 浮动价
                    offerType = 2;
                    break;
                case 2: case '2':  // 费率报价
                    offerType = 3;
                    break;

                default:
                    break;
            }
            let data = {
                mcType,
                offerType,
            }
            APIS.Jgzz.hotMatClass(data).then(res => {
                console.log('hotMatClass:', res);
                this['hot_arr_' + this.main_active] = res.data;
                let arr = [];
                res.data.map(e => {
                    arr.push([e.materialclasscode]);
                });
                this.hotMatCodes = arr;
                this.searchEvent();
            });
        },
        getmatClassify(data1, num) {
            APIS.Baseapi.matClassify(data1)
                .then((res) => {
                    if (num == 1) {
                        this.wldllist = res.data;
                    } else if (num == 2) {
                        this.wlellist = res.data;
                    } else {
                        this.wlsllist = res.data;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 项目地点
        getProjectEvaluation(id, pid) {
            let data = { pid, id };
            APIS.Jgzz.getProjectEvaluation(data).then(res => {
                console.log(res);
                if (id == 1) {
                    this.province_list = res.data;
                }
                else if (id == 2) {
                    this.city_list = res.data;
                }
                else if (id == 3) {
                    this.district_list = res.data;
                }
                else {
                    this.area_list = res.data;
                }
            });
        },
        areaChange(val) {
            this.area_list.map(e => {
                if (e.areacode == val) {
                    this.area_name = e.title;
                    this.getProjectEvaluation(1, e.areaid)
                }
            })
        },
        provinceChange(val) {
            this.province_list.map(e => {
                if (e.areacode == val) {
                    this.province_name = e.title;
                    this.getProjectEvaluation(2, e.areaid)
                }
            })
        },
        cityChange(val) {
            this.city_list.map(e => {
                if (e.areacode == val) {
                    this.city_name = e.title;
                    this.getProjectEvaluation(3, e.areaid)
                }
            })
        },
        districtChange(val) {
            this.district_list.map(e => {
                if (e.areacode == val) {
                    this.district_name = e.title;
                }
            })
        },
        resetEvent() {
            // this.seconddiqulist= [];
            this.materialName='';
            this.area_val = '';
            this.province_val = '';
            this.province_list = [];
            this.city_val = '';
            this.city_list = [];
            this.district_val = '';
            this.district_list = [];

            this.matCode = '';
            this.gclb_val = '';
            this.gzfl_val = '';
            this.zyfb_val = '';

            this.hotMatCodes = [];

            this.jxzp_val = '';

            this.timeCheckVal = '';
            let new_date = new Date();

            this.criteria4_start = '';
            this.criteria4_end = '';
            this.criteria4 = [];
        },
        getarea() {
            APIS.Baseapi.area()
                .then((res) => {
                    this.seconddiqulist = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 工程分类
        getEng() {
            APIS.Jgzz.engineeringCategory().then(res => {
                // for(let key in res.data){
                //     this.gclb.push({name: key, value: res.data[key]});
                // }
                res.data.map(e => {
                    this.gclb.push({ name: e.dicname, value: e.diccode });
                })
            })
        },
        // 公种分类
        getLabourClassify() {
            let data = {};
            let keyName = 'mainMatClassify'
            // macType 分类： 0=材料；1=专业分包；3=机械；4=劳务
            if (this.main_active === 0) { // 材料
                data.offerType = +this.child_active + 1;
                keyName = 'matClTree'
            }
            else if (this.main_active === 1) { // 劳务
                data.macType = 4;
                keyName = 'lwAndZyfbType'
            }
            else if (this.main_active === 2) { // 专业分包
                data.macType = 1;
                keyName = 'lwAndZyfbType'
            }
            else if (this.main_active === 3) { // 租赁
                data.macType = 3;
            }
            APIS.Jgzz[keyName](data).then(res => {
                console.log('gzfl', res);
                this.typeList = res.data;
                if (this.main_active === 0) { // 材料
                    this.clfl = this.getOpt(res.data);
                }
                else if (this.main_active === 1) { // 劳务
                    this.gzfl = this.getOpt(res.data[0].children ? res.data[0].children : []);
                }
                else if (this.main_active === 2) { // 专业分包
                    this.zyfb = this.getOpt(res.data);
                }
                else if (this.main_active === 3) { // 租赁
                    this.jxzp = this.getOpt(res.data);
                }
                // res.data.map(e=>{
                //     if(e.materialclassname.indexOf('劳务')>-1){
                //         this.gzfl = this.getOpt(e.children);
                //     }
                //     if(e.materialclassname.indexOf('专业')>-1){
                //         this.zyfb = this.getOpt(e.children);
                //     }
                // })
            })
        },
        // 机械租赁分类
        // getMatClassJX(){
        //     APIS.Jgzz.mockMatClassJX().then(res=>{
        //         console.log('mockMatClassJX:', res);
        //         res.data.map(e=>{
        //             if(e.materialclassname.indexOf('机械')>-1){
        //                 this.jxzp = this.getOpt(e.children);
        //             }
        //         })
        //     })
        // },
        getOpt(list) {
            list.map(e => {
                if (e.children && e.children.length > 0) {
                    e.children = this.getOpt(e.children)
                } else {
                    delete e.children
                }
                return e;
            })
            return list
        },
        timeCheckChange(e) {
            console.log('e:', e);
            let new_date = new Date();
            switch (e) {
                case 1:
                    this.criteria4_start = new Date(+new_date - 30 * 24 * 3600 * 1000);
                    this.criteria4_end = new_date;
                    break;
                case 2:
                    this.criteria4_start = new Date(+new_date - 15 * 24 * 3600 * 1000);
                    this.criteria4_end = new_date;
                    break;
                case 3:
                    this.criteria4_start = new Date(+new_date - 7 * 24 * 3600 * 1000);
                    this.criteria4_end = new_date;
                    break;
                case 4:
                    this.criteria4_start = new Date(+new_date - 180 * 24 * 3600 * 1000);
                    this.criteria4_end = new_date;
                    break;

                default:
                    this.criteria4 = []
                    break;
            }
        },
        handleActiveItemChange(e) {
            console.log('e', e);
        },
        searchEvent() {
            console.log('->-search-<-', this.hot_0);
            let hotMatCodes = [];
            this.hotMatCodes?.map(e => {
                hotMatCodes.push(e[0]);
            })
            let data = {
                main_active: this.main_active,
                criteria4: [this.criteria4_start, this.criteria4_end],
                child_active: this.child_active,
                hotMatCodes,
                materialName:this.materialName
            }
            let areaCode = this.district_val || this.city_val || this.province_val || this.area_val;
            // let areaName = this.district_name || this.city_name || this.province_name || this.area_name;

            if (areaCode) {
                data.areaCode = areaCode;
                // data.areaName = areaName;
            }
            if (this.matCode && this.main_active == 0) {
                data.matCode = this.matCode[this.matCode.length - 1]
            }
            if (this.main_active == 0) {
                if (this.hot_0 == 2) {
                    delete data.hotMatCodes;
                } else {
                    delete data.matCode;
                }
            }
            // 劳务
            if (this.main_active == 1) {
                data.matCode = this.gzfl_val;
                data.matCode = data.matCode[data.matCode.length - 1];
                data.engineeringCategory = this.gclb_val;
                if (this.hot_1 == 2) {
                    delete data.hotMatCodes;
                } else {
                    delete data.matCode;
                }
            }
            if (this.main_active == 2) {
                data.matCode = this.zyfb_val;
                data.engineeringCategory = this.gclb_val;
                data.matCode = data.matCode[data.matCode.length - 1];
                if (this.hot_2 == 2) {
                    delete data.hotMatCodes;
                } else {
                    delete data.matCode;
                }
            }
            if (this.main_active == 3) {
                data.matCode = this.jxzp_val;
                data.matCode = data.matCode[data.matCode.length - 1];
                if (this.hot_3 == 2) {
                    delete data.hotMatCodes;
                } else {
                    delete data.matCode;
                }
            }

console.log(data,'data');

            this.$emit('search', { pageNum: 1, pageSize: 10 }, data);
        },
        mainClick(e) {
            this.main_active = e;
            this.child_active = 0;
            this.materialName=''
            this.getLabourClassify();
            this.resetEvent();

            this.timeCheckVal = 4;
            let new_date = new Date();
            this.criteria4_start = new Date(+new_date - 180 * 24 * 3600 * 1000);
            this.criteria4_end = new_date;
            this.criteria4 = [new Date(+new_date - 180 * 24 * 3600 * 1000), new_date];

            this.area_val = 'C02';

            this.$nextTick(() => {
                this.province_val = 'C0233';
                this.$nextTick(() => {
                    this.city_val = 'C023301';
                    this.getHotMatClass();
                })
            })

            this.getProjectEvaluation(0, '');
            this.getProjectEvaluation(1, 'C02');
            this.getProjectEvaluation(2, 'C0233');
            this.getProjectEvaluation(3, 'C023301');
            if (e === 0) {

            }
            else if (e === 1) {

            }
            else if (e === 2) { }
            else if (e === 3) { }
        },
        childClick(e) {
            if (e == 1 || e == 2) {
                this.hot_0 = 2
            } else {
                this.hot_0 = 1
            }
            this.materialName=''
            this.child_active = e;
            this.getLabourClassify();
            this.resetEvent();

            this.area_val = 'C02';
            this.$nextTick(() => {
                this.province_val = 'C0233';
                this.$nextTick(() => {
                    this.city_val = 'C023301';
                    // this.searchEvent();
                    this.getHotMatClass();
                })
            })

            this.getProjectEvaluation(0, '');
            this.getProjectEvaluation(1, 'C02');
            this.getProjectEvaluation(2, 'C0233');
            this.getProjectEvaluation(3, 'C023301');

            this.timeCheckVal = 4;
            let new_date = new Date();
            this.criteria4_start = new Date(+new_date - 180 * 24 * 3600 * 1000);
            this.criteria4_end = new_date;
            this.criteria4 = [new Date(+new_date - 180 * 24 * 3600 * 1000), new_date];

        },
        handleOperation(e) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.rotate = e;
            }, 150);
        },
    },
}
</script>

<style lang="scss" scoped>
.jgzzsearch {
    width: 100%;

    ::v-deep .time {
        .transform180 {
            transform: rotate(180deg);
            transition: all 0.5s;
        }

        .transform0 {
            transform: rotate(0deg);
            transition: all 0.5s;
        }

        .icon {
            display: flex;
            align-items: center;
        }

        .icon::before {
            content: "▼";
            font-size: 12px;
            color: #0054f9;
        }

        display: flex;
        align-content: center;

        .el-input__prefix {
            display: none;
        }

        .el-date-editor.el-input {
            width: 7rem;
        }

        .el-input__inner {
            padding: 0 1rem;
            font-family: JCYT;
            border: none;
            background-color: transparent;
            position: relative;
            font-size: 0.8rem;
        }

        .el-range-editor .el-range-input {
            background-color: transparent;
        }

        .el-date-editor .el-range__close-icon {
            margin-right: 0.5rem;
        }
    }

    ::v-deep .myselectjgzz2 {
        .el-input__inner {
            font-family: JCYT;
            background-color: transparent;
            border-radius: 0;
            height: 20px;
            border: none;
            line-height: 20px;
        }
        .el-input {
            font-size: 0.8rem;
            border: 1px solid #192B53;
            border-radius: 2px;
        }
    }

    ::v-deep .myselectjgzz {
        width: 100%;
        position: relative;

        .el-icon-arrow-up:before {
            content: "▲";
            color: #192c55;
        }

        .el-input__inner {
            font-family: JCYT;
            border: none;
            background-color: transparent;
            border-radius: 0;

        }

        .el-input {
            font-size: 0.8rem;
        }

        /* .el-input__suffix {
            width: 20px;
            height: 20px;
            color: #192c55;
            right: 1.3rem;
            top: calc(100% - 10px);
            } */
    }

    ::v-deep .el-date-editor {
        border: 1px solid #192B53;
        height: 20px;
        line-height: 20px;
        border-radius: 2px;
    }

    ::v-deep .el-cascader__tags .el-tag {
        display: none;

        &:first-child {
            display: inline-flex;

            span {
                width: 4rem;
            }
        }
    }

    ::v-deep .el-cascader,
    .el-select {
        border: 1px solid #192B53;
        min-height: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 2px;

        // overflow: hidden;
        .el-icon-arrow-down:before {
            content: "▼";
            color: #192B53;
        }

        .el-icon-arrow-up:before {
            content: "▲";
            color: #192B53;
        }

        .el-input--mini .el-input__inner,
        .el-input--mini .el-input__icon {
            line-height: 20px;
            height: 20px !important;
        }
    }

    ::v-deep .el-input--mini .el-input__inner {
        line-height: 20px;
        height: 20px;
    }

    ::v-deep .el-input--mini .el-input__icon {
        line-height: 20px;
        height: 20px;
    }

    &-main {

        // display: flex;
        .list-con {
            display: flex;

            // transform: translateY(-50%);
            .list {
                padding: 0.25rem 1.2rem;
                border: 0.05rem solid #182b53;
                margin-right: 10px;
                background: #fff;
                border-radius: 3rem;
                cursor: pointer;

                &.on {
                    color: #fff;
                    background: #182b53;
                }
            }
        }

        .nav {
            display: flex;
            border-radius: 3rem;
            padding: 0.3rem 0;
            position: relative;

            &-list {
                padding: 0.25rem 1.2rem;
                border: 0.05rem solid #182b53;
                margin-right: 10px;
                background: #fff;
                border-radius: 3rem;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap;

                &.on {
                    color: #fff;
                    background: #182b53;
                }
            }
        }
    }

    &-left {
        // width: 33%;
        // min-width: 35.5rem;
    }

    &-center {
        padding-top: 1.5rem;
        // width: calc(100% - 3rem - 20px - 33%);
        // min-width: calc(100% - 4rem - 20px - 15.5rem);
        display: flex;

        .factor {
            display: flex;
            flex-wrap: wrap;
            justify-content: end;

            &.w_1 {
                .factor-list {
                    width: 22%;
                }
            }

            &.w_2 {
                .factor-list {
                    width: 23%;
                }
            }

            &-list {
                display: flex;
                align-items: center;
                margin-right: 0.5rem;
                margin-bottom: 15px;
                width: 30%;

                .label {
                    margin-right: 0.6rem;
                    // width: 4.5rem;
                    padding-left: 1rem;
                    font-size: 0.7rem;
                    text-align: right;
                    white-space: nowrap;
                }

                .label_1 {
                    margin-right: 5px;
                    position: relative;
                    cursor: pointer;

                    /* .label{
                            color: #fff;
                            line-height: 20px;
                        } */
                    select {
                        background: #182b53;
                        border-radius: 3px;
                        color: #fff;
                        border-color: #182b53;
                        // display: none;
                        /* position: absolute;
                            top: 20px;
                            left: 0;
                            width: 100%;
                            .li{
                                line-height: 20px;
                                font-size: 0.6rem;
                                text-align: center;
                            } */
                    }
                }

                .time {
                    display: flex;
                    align-items: center;
                    margin-left: 1rem;
                }

                .ads {
                    display: flex;
                    align-items: center;

                    .el-select {
                        margin-left: 0.5rem;
                    }
                }
            }

        }
    }

    &-right {
        // margin-left: 20px;
        // width: 3rem;
        // cursor: pointer;
        display: flex;
        align-items: baseline;
        justify-content: space-between;

        .iconsearch {
            width: 3rem;
            height: 3rem;
            cursor: pointer;
        }

        .btn-con {
            width: 8rem;
            display: flex;
            justify-content: end;
        }

        .reset {
            width: 3rem;
            height: 3rem;
            cursor: pointer;
            border-radius: 3rem;
            color: #fff;
            background: #182b53;
            line-height: 3rem;
            text-align: center;
            margin-right: 1.3rem;
            user-select: none;
            // font-size: 0.8rem;
        }
    }
}
</style>